<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link type="text/css" href="${pageContext.request.contextPath}/shop/admin/css/Admin.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.min.css">
    <style>
        .layui-table{
            width: auto;
        }
    </style>
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <%@ include file="../header-side.jsp" %>
    <script>
        if((window.location.pathname).indexOf('sales')>=0 || (window.location.pathname).indexOf('sales')>=0){
            document.getElementsByClassName('sales')[0].className+='  layui-this '
        }
    </script>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="tables">
						<span class="layui-breadcrumb">
							<a href="/web325/shop/client">首页</a>
							<a><cite>销售榜单</cite></a>
						</span>
            <hr>
            <%-- 选择年份月份以及升序降序 --%>
            <form class="layui-form" action="<c:url value="/shop/admin/salesList"/>">
                <div class="layui-form-item" style="display: flex;align-items: center;">
                    <input type="text" id="chooseDate" name="date" lay-verify="required" class="layui-input" style="width: auto" autocomplete="off">
                    <button  class="layui-btn  layui-btn-sm  layui-btn-normal" style="margin-left: 20px;">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                </div>
            </form>
            <c:choose>
                <c:when test="${saleList!=null}">
                    <table class="layui-table" lay-even lay-skin="row">
                        <tr>
                            <th>书名</th>
                            <th>销售总数</th>
                        </tr>
                        <c:forEach var="item" items="${saleList}">
                            <tr>
                                <td>${item.name}</td>
                                <td>${item.totalsnum}</td>
                            </tr>
                        </c:forEach>
                    </table>
                    <c:if test="${saleList.size() == 0}">
                        <h4>暂无数据</h4>
                    </c:if>
                </c:when>
                <c:otherwise>
                    <h4>请先搜索获取数据</h4>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>
<script>
    function delOrder(id) {
        layer.confirm('确认删除该订单吗？', {
            btn: ['确认', '取消'], //可以无限个按钮
            btn1: function (index, layero) {
                window.location.href = 'removeOrder?id=' + id
                return true;
            }
        });
    }
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        // 年月选择器
        laydate.render({
            elem: '#chooseDate'
            ,type: 'month'
            ,format: 'yyyy年MM月' //可任意组合
        });
    });


    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
        });
    });
</script>
</body>

</html>